<template>
	<view>
		<uni-forms ref="queryForm" :modelValue="queryParams">
			<uni-forms-item label="单位" label-width="85">
				<uni-data-picker placeholder="请选择单位" popup-title="请选择单位" :localdata="orgOptions" v-model="orgId"
				@nodeclick="orgChange" :map="filedName">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="姓名" label-width="85">
				<uni-easyinput v-model="queryParams.nickName" placeholder="姓名"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<view style="display: flex;">
			<button size="mini" class="common-btn other-btn" @click="handleRepeat">重置</button>
			<button size="mini" class="common-btn primary-btn" @click="handleQuery">查询</button>
		</view>
		<view class="radio-list">
			<radio-group @change="radioChange" class="uni-radio-group">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in users" :key="item.id">
					<view>
						<radio :value="item.id"/>
					</view>
					<view>{{item.nickName}}</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	import { getOrgTreeList,getOrgUser} from '@/api/system/org.js'
	import { listUsers } from '@/api/system/user.js'
	export default {
		name:"user-select",
		props:{
			orgid:{
				type:String
			}
		},
		data() {
			return {
				orgOptions:[],
				filedName:{
					text:'label',
					value:'id'
				},
				queryParams:{},
				users:[]
			};
		},
		computed:{
			orgId(){
				return this.orgid
			}
		},
		mounted() {
			this.getOrgList();
			//console.log(this.orgId);
			if(this.orgId){
				this.queryParams.orgId = this.orgId;
			}
			this.handleQuery();
		},
		methods:{
			radioChange(e){
				let userArr = this.users.filter(item => {
					return item.id == e.detail.value
				})
				this.$emit("change",userArr[0]);
			},
			getOrgList(){
				var setData = function(data){
					data.forEach(item => {
						item.text = item.label;
						item.value = item.id;
						if(item.children){
							setData(item.children);
						}
					});
					return data;
				}
				
				let param = {};
				getOrgTreeList(param).then(res=>{
					//console.log(JSON.stringify(res));
					if(res.code == 200){
						this.orgOptions = setData(res.data);
					}else{
						this.$modal.msgError(res.msg);
					}
				});
			},
			orgChange(e){
				this.queryParams.orgId = e.value;
				this.handleQuery();
			},
			handleRepeat(){
				this.orgId = this.orgid;
				this.queryParams = {
					orgId:this.orgId
				};
				this.handleQuery();
			},
			handleQuery(){
				let _this= this;
				console.log(JSON.stringify(this.queryParams));
				listUsers(this.queryParams).then(res => {
					console.log(JSON.stringify(res));
					_this.users = res.rows;
				})
			},
		}
	}
</script>

<style>
	.radio-list{
		border-top: 1px solid #F1F1F1;
		margin-top: 10px;
		padding: 10px;
		height: 300px;
		overflow-y: scroll;
	}
	.uni-radio-group {
		display: block;
	}
	.uni-list-cell-pd{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
</style>